﻿<div class="demo-description" id="Templates">
    <h2>
        <DemoNavLink Link="TreeView#Templates" />TreeView - Templates
    </h2>
    <p>
        The DevExpress <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView">TreeView</a> component for Blazor allows you to define custom templates for its nodes.
    </p>
    <p>
        Use the following <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView">DxTreeView</a> properties to specify a common node template and a text template for all nodes:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.NodeTemplate">NodeTemplate</a></li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.NodeTextTemplate">NodeTextTemplate</a></li>
    </ul>
    <p>In unbound mode, you can create node templates on an individual basis. These templates have a priority over common templates. Use the following <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeViewNode">DxTreeViewNode</a> properties:</p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeViewNode.Template">Template</a></li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeViewNode.TextTemplate">TextTemplate</a></li>
    </ul>
</div>

<div class="card demo-card border-0">
    <div class="card-body py-0">
        <DxTreeView @ref="@treeView"
                    Data="@ComponentsData.ComponentSets"
                    CssClass="demo-treeview-template"
                    ChildrenExpression="@(dataItem => ((ComponentSet)dataItem).ComponentSets)">
            <NodeTemplate>
                @{
                    var dataItem = (ComponentSet)context.DataItem;
                }
                @if (!context.IsLeaf)
                {
                    <h4 class="my-0 p-2 d-flex align-items-center">
                        <small class="@GetExpandButtonCssClass(dataItem)" style="top: 0px"></small>
                        <span class="ml-3">@dataItem.Title</span>
                    </h4>
                }
                else
                {
                    <div class="media p-2">
                        <img class="bg-primary rounded-circle mr-3 treeview-template-icon" src="@dataItem.ImageUrl" alt="@dataItem.Title" />
                        <div class="media-body">
                            <h5 class="mt-0">@dataItem.Title</h5>
                            @dataItem.Description
                        </div>
                    </div>
                }
            </NodeTemplate>
        </DxTreeView>
    </div>
</div>

<CodeSnippet_TreeView_Templates />

@code {
    DxTreeView treeView;

    string GetExpandButtonCssClass(ComponentSet nodeDataItem)
    {
        return String.Format("demo-icon-{0}", treeView.GetNodeExpanded(n => n.DataItem == nodeDataItem) ? "collapse" : "expand");
    }

    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            treeView.ExpandAll();
        return base.OnAfterRenderAsync(firstRender);
    }
}
